<template>
  <view>
    <view class="top">
      <view class="have">
        有了
      </view>
      <view class="search">
        <text class="icon-search iconfont"></text>搜索职位、公司
      </view>
      <view class="iconfont icon-gongyi notice">

      </view>
      <view class="pic">
        <image :src="$store.state.userInfo.u_pic" mode=""></image>
      </view>
    </view>
    <view class="block">
      <view class="big-item">
        <view class="left">今日热榜</view>
        <view class="right">
          <view class="week">
            {{getDate().week}}
          </view>
          <view class="num">
            {{getDate().day}}
          </view>
        </view>
      </view>
      <view class="sm-item iconfont icon-xueli">
        <view>学生圈</view>
      </view>
      <view class="sm-item iconfont icon-xueli">
        <view>学生圈</view>
      </view>
      <view class="sm-item iconfont icon-xueli">
        <view>学生圈</view>
      </view>
      <view class="big-item">
        <view class="left">直播招聘<view class="playback">
            往期回放
          </view>
        </view>
        <view class="right iconfont icon-cgz">

        </view>
      </view>
    </view>
    <view class="add" v-show="tabIndex===1">+</view>
    <view class="nav">
      <view class="tabview">
        <scroll-view class="scrollView" scroll-x show-scrollbar="false" :scroll-left="scrollLeft" scroll-with-animation
          style="height: 74rpx;">
          <view class="tabBox">
            <view class="items" v-for="(item, index) in navList" :key="index" @click="clickTab(index)">
              <view class="tabText" :class="index == tabIndex ? 'active' : ''">
                {{item}}
              </view>
            </view>
          </view>
          <view class="underscore" :style="{ width: inderWidth + 'px', 'margin-left': indexLeft + boxLeft + 'px' }" />
        </scroll-view>
      </view>
      <view class="gap" />
    </view>
    <swiper class="swiper" :current="tabIndex" @change="change" duration='300'>
      <swiper-item class="swiper-item follow">
        <view class="no">
          <image src="../../static/null1.jpg" mode="widthFix"></image>
          <view class="msg">关注你感兴趣的人和话题</view>
          <view class="msg">他们的更新会出现在这里</view>
          <view class="toFollow">去关注</view>
        </view>
      </swiper-item>
      <swiper-item class="recommend swiper-item">
        <view class="item" v-for="(item,i) in list.recommend" :key='i' @click="recommendClick(item)">
          <view class="item-top">
            <view class="user">
              <view class="pic">
                <image :src="item.u_pic" mode=""></image>
              </view>
              <view class="info">
                <view class="name">
                  {{item.u_name}}
                </view>
                <view class="position">
                  {{item.position}}·{{item.company||item.workEXP}}
                </view>
              </view>
            </view>
            <view class="more">...</view>
          </view>
          <view class="content">
            {{item.content}}
          </view>
          <view class="topic">
            <text class="item">
              <view v-if="item.topic">#</view>{{item.topic}}
            </text>
          </view>
        </view>

      </swiper-item>
      <swiper-item class="answer swiper-item">
        <view class="list-top">

        </view>
        <view class="screen">
          <scroll-view scroll-x="true">
            <view class="screen-list">
              <view class="screen-item">学生互助</view>
              <view class="screen-item">新提问</view>
              <view class="screen-item">同行请教</view>
              <view class="screen-item">学生提问</view>
              <view class="screen-item">Boss提问</view>
              <view class="screen-item">投票</view>
            </view>
          </scroll-view>

          <view class="screen-btn">
            筛选
          </view>
        </view>
        <view class="answers">
          <view class="answer-item" v-for="(item,i) in answerList" :key='i'>
            <view class="title">
              {{item.title}}
            </view>
            <view class="user">
              <view class="pic">
                <image :src="item.u_pic" mode=""></image>
              </view>
              <view class="info">
                <text class="name">{{item.u_name}}</text><text
                  class="msg">{{item.position}}·{{item.company||item.workEXP}}</text>
              </view>
            </view>
            <view class="footer">
              <view class="already">
                已经有了 5 人回答<text class="iconfont icon-right"></text>
              </view>
              <view class="write-answer">
                写回答
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <view class="list3">d</view>
      </swiper-item>
    </swiper>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        navList: ["关注", "推荐", "回答交流", "好文", ],
        tabIndex: 1,
        windowsWidth: 0, // 设备窗口大小
        boxLeft: 0,
        isOutWindow: false, // tab是否超出屏幕
        inderWidth: 0, // 下划线宽度
        indexLeft: 0, // 下划线距左边距离
        scrollLeft: 0,
        // 根据该数据结构设计数据库
        answerList: [{
          user_id: 'xxx',
          u_name: '李老师',
          u_pic: '../../static/logo.png',
          // 求职者：职位·工作年龄||招聘者：职位·公司
          identity: '',
          workEXP: '', //求职者工作年龄
          position: '人事经理',
          title: '[西安] 中煤航测值得应届生去吗？',
          company: '厦门学中企业管理咨询'
        }],
        list: {
          follow: [],
          recommend: [],
          answer: []
        },
        offset: {
          follow: 0,
          recommend: 0,
          answer: 0,
        },
        // 防止get不缓存（不是304），防止多次请求
        isRequest: {
          follow: true,
          recommend: true,
          answer: true,
        }
      }
    },
    created() {
      let that = this;
      this.getData()
      // 获取屏幕宽度
      uni.getSystemInfo({
        success(res) {
          that.windowsWidth = res.windowWidth
        }
      })
    },
    mounted() {
      // 判断tab是否超出屏幕
      uni.createSelectorQuery().in(this).selectAll(".items").boundingClientRect().exec((data) => {
        if (data[0][this.navList.length - 1].right > this.windowsWidth) {
          this.isOutWindow = true
        }
        this.$nextTick(() => {
          this.clickTab(this.tabIndex)
        })
      })
    },
    watch: {
      // 监听传入下标更改
      tabIndex(newValue, oldValue) {
        this.clickTab(newValue)
        // 根据下标的不同，请求不同页面数据
        this.getData()
      }
    },
    onPullDownRefresh() {
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1000)
    },
    methods: {
      getDate() {
        const now = new Date()
        const day = now.getDate()
        let week = ""
        switch (now.getDay()) {
          case 1:
            week = "周一"
            break
          case 2:
            week = "周二"
            break
          case 3:
            week = "周三"
            break
          case 4:
            week = "周四"
            break
          case 5:
            week = "周五"
            break
          case 6:
            week = "周六"
            break
          case 7:
            week = "周日"
            break
        }
        return {
          week,
          day
        }
      },
      clickTab(index) {
        // 更改选中下标
        this.tabIndex = index

        // this.$emit("getIndex", index)
        // 获取盒子移动距离
        if (this.isOutWindow && index >= 0) {
          uni.createSelectorQuery().in(this).select(".tabBox").boundingClientRect().exec((data) => {
            if (index == 0) {
              this.boxLeft = 0
            } else {
              // 移动距离
              this.boxLeft = -data[0].left
            }
          })
        }
        uni.createSelectorQuery().in(this).selectAll(".items").boundingClientRect().exec((data) => {
          let width = data[0][index].width
          let left = data[0][index].left
          let newLeft = 0

          // tab超出屏幕
          if (this.isOutWindow) {
            if (index == 0) {
              left = 0
            }

            // 防止移动后距离缩短问题
            for (let i = 0; i < index; i++) {
              newLeft += data[0][i].width
            }

            // 是否需要居中
            if (this.windowsWidth / 2 < newLeft + width) {
              this.scrollLeft = width / 2 - (this.windowsWidth / 2 - newLeft)
            } else {
              this.scrollLeft = 0
            }
          }
          // 点击tab宽度
          this.inderWidth = width / 2
          // 移动距离
          this.indexLeft = (width - width / 2) / 2 + left
        })
      },
      change(e) {
        this.tabIndex = e.detail.current
      },
      getData() {
        let type = null
        switch (this.tabIndex) {
          case 0:
            type = 'follow'
            break;
          case 1:
            type = 'recommend'
            break;
          case 2:
            type = 'answer'
            break;
            // 好文
          case 3:
            console.log("好文")
            break;
          default:
            break;
        }
        if (!type || !this.isRequest[type]) return
        uni.request({
          url: `${this.BASE_URL}/article/${type}?offset=${this.offset[type]}`,
          success: res => {
            if (res.data.code === 200) {
              this.list = {
                ...this.list,
                [type]: [...this.list[type], ...res.data.result]
              }
              this.isRequest = {
                ...this.isRequest,
                [type]: false
              }
            }
          }
        })
      },
      recommendClick(item) {
        uni.navigateTo({
          url:'../articleDetail/articleDetail?detail='+encodeURIComponent(JSON.stringify(item))
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background: $uni-bg-color-grey;
  }

  .top {
    width: 750rpx;
    height: 110rpx;
    padding-top: 58rpx;
    background: $uni-color-primary;
    position: fixed;
    top: var(--window-top);
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .have {
      font-size: 40rpx;
      font-weight: bold;
      color: #fff;
    }

    .search {
      width: 380rpx;
      height: 58rpx;
      padding-left: 38rpx;
      background: #5ACDC8;
      opacity: 0.8;
      border-radius: 30rpx;
      color: #Fff;
      line-height: 58rpx;

      .iconfont {
        margin-right: 20rpx;
      }
    }

    .notice {
      font-size: 38rpx;
      color: #Fff;
    }

    .pic {
      width: 46rpx;
      height: 46rpx;
      border-radius: 50%;

      image {
        width: 46rpx;
        height: 46rpx;
        border-radius: 50%;
        background: $uni-bg-color;
      }
    }
  }

  .block {
    width: 689rpx;
    padding: 188rpx 26rpx 30rpx;
    display: flex;
    flex-wrap: wrap;
    background: #fff;

    .big-item {
      width: 190rpx;
      height: 130rpx;
      margin-bottom: 6rpx;
      margin-right: 6rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx;

      .left {
        font-size: 28rpx;
        font-weight: bold;

        .playback {
          font-size: 22rpx;
          color: #666;
        }
      }

      .right {
        width: 54rpx;
        height: 62rpx;
        border: 5rpx solid $uni-color-primary;
        border-radius: 10rpx;
        color: $uni-color-primary;
        text-align: center;

        .week {
          font-size: 16rpx;
          height: 22rpx;
          line-height: 22rpx;
          background: #B1E5E1;
        }
      }
    }

    .big-item:nth-of-type(1) {
      border-radius: 30rpx 0 0 0;
      background: #E2F6F5;
    }

    .big-item:nth-of-type(5) {
      border-radius: 0 0 0 30rpx;
      background: #DDF0FF;
    }

    .sm-item {
      width: 130rpx;
      height: 90rpx;
      background: #E2F6F5;
      margin-right: 6rpx;
      font-size: 60rpx;
      text-align: center;
      padding: 20rpx 0;
      color: $uni-color-primary;

      view {
        font-size: 22rpx;
        color: #000;
      }
    }

    .sm-item:nth-of-type(4) {
      border-radius: 0 30rpx 0 0;
    }
  }

  .nav {
    border-bottom: 1px solid #F3F3F3;

    .tabview {
      width: 100vw;
      position: absolute;
      left: 0;
    }

    .scrollView {
      width: 100%;
      white-space: nowrap;
    }

    .tabBox {
      display: flex;
      align-items: center;
    }

    .items {
      line-height: 60rpx;
      padding: 0 20rpx;
      margin-left: 20rpx;
      font-size: 34rpx;
    }

    .tabText {}

    .active {
      font-weight: bold;
      font-size: 36rpx;
    }

    .underscore {
      height: 3px;
      transition: .2s all;
      border-radius: 6rpx;
      background: #37C2BB;
    }

    /deep/.uni-scroll-view::-webkit-scrollbar {
      display: none
    }

    .gap {
      height: 74rpx;
      background-color: #fff;
    }
  }

  .swiper {
    overflow: auto !important;
    height: calc(100vh - 262rpx) !important;

    .swiper-item {
      overflow: auto !important;
    }

    .follow {
      width: 750rpx;
      background: $uni-text-color-inverse;

      .no {
        position: absolute;
        top: 44%;
        left: 50%;
        transform: translate(-50%, -50%);

        image {
          width: 280rpx;
          display: block;
          margin: 0 auto 34rpx;
        }

        .msg {
          font-size: 30rpx;
          color: $uni-text-color-grey;
          margin-top: 10rpx;
        }

        .toFollow {
          width: 214rpx;
          height: 68rpx;
          background: $uni-color-primary;
          border-radius: 30rpx;
          color: $uni-text-color-inverse;
          font-size: 30rpx;
          text-align: center;
          line-height: 68rpx;
          margin: 34rpx auto 0;
        }
      }
    }

    .recommend {

      .item {
        width: 680rpx;
        padding: 35rpx;
        background: #fff;
        margin-bottom: 10rpx;

        .item-top {
          width: 680rpx;
          height: 78rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .user {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .pic {
              width: 68rpx;
              height: 68rpx;
              border-radius: 50%;
              margin-right: 16rpx;

              image {
                width: 68rpx;
                height: 68rpx;
                border-radius: 50%;
              }
            }

            .info {
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              .name {
                font-size: 28rpx;
                font-weight: bold;
              }

              .position {
                font-size: 22rpx;
                color: $uni-text-color-grey;
              }
            }
          }

          .more {
            color: $uni-text-color-grey;
            font-size: 40rpx;
          }
        }
      }

      .content {
        margin-top: 10rpx;
        font-size: 34rpx;
      }
      .topic {
        margin-top: 30rpx;
        width: 680rpx;
      
        .item {
          padding: 6rpx 16rpx 6rpx 52rpx;
          background: #F5F5F5;
          border-radius: 24rpx;
          font-size: 22rpx;
          height: 42rpx;
          line-height: 42rpx;
          font-size: 24rpx;
          width: auto;
          position: relative;
      
          view {
            position: absolute;
            left: 10rpx;
            top: 8rpx;
            background: $uni-color-primary;
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
            text-align: center;
            line-height: 32rpx;
            color: $uni-text-color-inverse;
            font-size: 28rpx;
          }
        }
        }
    }

    .answer {
      background: #fff;

      .list-top {
        height: 230rpx;
        width: 680rpx;
        background: #71B719;
        border-radius: 26rpx;
        position: relative;
        margin: 5rpx auto 20rpx;
      }

      .screen {
        width: 680rpx;
        height: 46rpx;
        margin: auto;
        padding: 20rpx 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 1rpx solid $uni-bg-color-grey;

        scroll-view {
          width: 560rpx;
          height: 46rpx;

          .screen-list {
            width: 990rpx;
            display: flex;
            flex-wrap: nowrap;

            .screen-item {
              background: #F6F6F6;
              height: 46rpx;
              line-height: 46rpx;
              padding: 0 30rpx;
              margin-right: 20rpx;
              border-radius: 20rpx;
              font-size: 26rpx;
              color: $uni-text-color-grey;
            }
          }
        }

        .screen-btn {
          width: 120rpx;
          height: 46rpx;
          border-left: 1px solid $uni-text-color-grey;
        }

      }

      .answers {
        background: $uni-bg-color-grey;

        .answer-item {
          width: 680rpx;
          padding: 35rpx;
          background: #fff;
          margin-bottom: 10rpx;

          .title {
            font-size: 32rpx;
            font-weight: bold;
          }

          .user {
            display: flex;
            height: 70rpx;
            align-items: center;

            .pic {
              width: 42rpx;
              height: 42rpx;
              border-radius: 50%;
              margin-right: 10rpx;

              image {
                width: 42rpx;
                height: 42rpx;
                border-radius: 50%;
              }
            }

            .info {
              display: flex;
              align-items: center;
              height: 70rpx;

              .name {
                font-size: 24rpx;
                color: $uni-text-color-grey;
                margin-right: 16rpx;
              }

              .msg {
                font-size: 26rpx;
                color: $uni-text-color-grey;
                opacity: .7;
              }
            }
          }

          .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 34rpx;

            .already {
              font-size: 26rpx;
              color: $uni-text-color-grey;
              opacity: .7;

              .iconfont {
                font-size: 26rpx;
                margin-left: 10rpx;
              }
            }

            .write-answer {
              width: 108rpx;
              height: 42rpx;
              font-size: 26rpx;
              text-align: center;
              line-height: 42rpx;
              border-radius: 10rpx;
              color: #fff;
              background: $uni-color-primary;
            }
          }
        }
      }
    }

  }

  .add {
    width: 94rpx;
    height: 94rpx;
    background: $uni-color-primary;
    font-size: 42rpx;
    color: #fff;
    position: fixed;
    border-radius: 50%;
    line-height: 94rpx;
    text-align: center;
    right: 38rpx;
    bottom: 40rpx;
    z-index: 10;
  }
</style>
